<route lang="yaml">
meta:
  layout: home
  title: 我的评论
  savedPosition: true
</route>
<template>
  <div class=" bg-white" v-loading="loading">
    <div class="text-2xl flex justify-start px-8  leading-16! divide_b">
      评论
    </div>

    <!-- 内容版块 -->
    <div v-if="replyList.length !== 0">
      <ul>
        <li :key="item?.id" v-for="item in replyList" class="sm:p-8 p-2">
          <!-- 时间 -->
          <div class="flex justify-start items-center relative">
            <div class="i-carbon-time h3 sm:wh-5 wh-4 mr-2" ></div>
            <div><span class="text-sm h3 sm:text-sm md:text-base lg:text-lg">{{dateFormat(item?.createdAt)}}</span></div>
          </div>
          <RouterLink @mouseenter="titleHover($event)" @mouseleave="titleHover($event)" :to="`/article/${item?.topicId?._id}`">
            <!-- 标题 -->
            <div class="title truncate  text-xl sm:text-lg md:text-xl font-bold">{{item?.topicId?.title}}</div>
          </RouterLink>
          <div class="sm:py-2 sm:px-5 py-1 px-4 text-lg sm:text-sm bg-gray-200 rounded">
            <p class="truncate">回复帖子: {{HtmlToText(item?.content)}}</p>
          </div>
        </li>
      </ul>
      <div class="text-center">没有更多的数据了</div>
    </div>
    <div v-else-if="replyList.length === 0">
      <el-empty description="暂时没有数据哟" :image-size="200" />
    </div>
  </div>

</template>

<script setup lang="ts">
import { fetchUserReplyList } from "@/server";
import { HtmlToText, dateFormat } from '@/utils'

//route
const route = useRoute()
//用户评论列表
const replyList:any = ref([])
//等待加载
const loading = ref(true)

//标题样式
const titleHover = (e:any)=>{
  if(e.type==="mouseenter"){
    e.target.querySelector('.title').classList.add("text-blue-400")
  }else{
    e.target.querySelector('.title').classList.remove("text-blue-400")
  } 
}

//更新时发送fetch
watchEffect(()=>{
  if(route.params.id){
    //获取评论列表
    fetchUserReplyList(route.params.id as string,()=>true).then((data)=>{ 
      replyList.value = data
      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  }
},{flush:'pre'})

</script>

<style scoped lang="scss">

</style>
